<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<template v-if="diffTime>0">
		<up-count-down :time="diffTime" @finish="timeFinish" @change="onChange">
			<view class="countdown flex-row-center">
				<up-icon name="clock" color="#DBDDDE" size="28rpx"></up-icon>
				<view class="time-info flex-row-center" v-if="timeData">
					<text class="text">{{timeTips}}</text>
					<text class="time">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
					<text class="text">天</text>
					<text class="time">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
					<text class="text">时</text>
					<text class="time">{{timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
					<text class="text">分</text>
					<text class="time">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
					<text class="text">秒</text>
				</view>
			</view>
		</up-count-down>
	</template>
	<template v-else>
		<view class="countdown flex-row-center">
			<up-icon name="clock" color="#DBDDDE" size="28rpx"></up-icon>
			<view class="time-info flex-row-center">
				<text class="text">赛事已经结束了</text>
			</view>
		</view>
	</template>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		formatDate,
		isMillisecondTimestamp
	} from '@/utils/utools.js';
	const emit = defineEmits(['changeTime']);
	const props = defineProps({
		status: {
			default: 0
		},
		startDate: {
			default: 0
		},
		endDate: {
			default: 0
		},
		matchDate: {
			default: 0
		}
	})

	const state = reactive({
		status: computed(() => props.status),
		startDate: computed(() => props.startDate),
		endDate: computed(() => props.endDate),
		matchDate: computed(() => props.matchDate),
	})
	const timeData = ref(null);
	const diffTime = ref('');
	const timeTips = ref('赛事已经结束了')
	onMounted(() => {

	});
	const computeDate = (date) => {
		let newdate = date;
		if (!isMillisecondTimestamp(date)) { //判断毫秒级时间戳
			newdate = date * 1000
		}
		const dateStr = dayjs(newdate).format('YYYY-MM-DD HH:mm:ss');
		// console.log('dateStr', dateStr);
		const date1 = dayjs(dateStr);
		const date2 = dayjs().format('YYYY-MM-DD HH:mm:ss')
		diffTime.value = date1.diff(date2) //毫秒
		// console.log('diffTime', diffTime.value);
	}
	const onChange = (e) => {
		timeData.value = e;
	};
	const timeFinish = () => {
		emit('changeTime');
	}
	watchEffect((newVal) => {
		if (props.status == 2) {
			timeTips.value = '距赛事开始';
			computeDate(props.matchDate);
		} else if (props.status == 1) {
			timeTips.value = '距报名结束';
			computeDate(props.endDate);
		} else if (props.status == 0) {
			timeTips.value = '距报名开始';
			computeDate(props.startDate);
		} else {
			timeTips.value = '赛事已经结束了'
		}
	})
</script>

<style lang="scss" scoped>
	.countdown {
		.time-info {
			font-size: 28rpx;
			margin-left: 12rpx;

			.text {
				color: #DBDDDE;
			}

			.time {
				color: #9BDEB5;
				margin: 0 8rpx;
			}
		}
	}
</style>